<template>
  <div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="本品">
        <el-cascader
        :options="options2"
        @change="getId0"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择本品"
      ></el-cascader>
      </el-form-item>
      <el-form-item label="竞品">
        <el-cascader
        :options="options2"
        @change="getId1"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品1"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId2"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品2"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId3"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品3"
      ></el-cascader>
      <el-cascader
        :options="options2"
        @change="getId4"
        :show-all-levels="true"
        :props="props"
        placeholder="请选择竞品4"
      ></el-cascader>
      </el-form-item>
      <div style="padding-left: 80px;">
        <el-button type="primary" icon="el-icon-search" @click="search" :loading='action' class="search">搜索</el-button>
      </div>
    </el-form>
    <v-noPriceMap :chartsId="item2.chartid" :key="item2.key" :data="item2.data" :val="item2.val" :name="item2.name" @forNoPrice="getData"></v-noPriceMap>
    <v-noPricePie :chartsId="item3.chartid" :key="item3.key" :data="item3.data"></v-noPricePie>
  </div>
</template>

<script>
import NoPriceMap from '@/components/views/chart/noPriceMap'
import NoPricePie from '@/components/views/chart/no_price_pie'
import { bus } from '@/bus.js'
  export default {
    data() {
      return {
        action: false,
        item2:{
          itemId: 2,
          chartid: 'myChart2',
          key: 2,
          val: [],
          name: [],
          data: []
        },
        item3:{
          itemId: 3,
          chartid: 'myChart3',
          key: 3,
          val: 3,
          data:[]
        },
        item4:{
          itemId: 4,
          chartid: 'myChart4',
          key: 4,
          val: 4
        },
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '丰田，宝马',
          type: ''
        },
        options2: [],
        props: {
          value: 'id',
          label: 'name',
          children: 'next'
        },
        chexi:{},
        value0: [],
        value1: [1]
      };
    },
    components: {
      'v-noPriceMap': NoPriceMap,
      'v-noPricePie': NoPricePie,
    },
    created(){
      let self = this;
      //获取品牌
      function getB(){
        return self.$http.get('gz/getBrand');
      }
      //获取车系
      function getS(){
        return self.$http.get('gz/getSeries');
      }
      this.$http.all([getB(), getS()])
      .then(self.$http.spread(function (b, s) {
        // 获取品牌，车系，车款后，填入数组
        let pinpai = b.data.BrandList;
        let chexi = s.data.SeriesList;
        self.chexi = chexi;
        for(let i = 0; i < pinpai.length; i++){
          pinpai[i].next = [];
          let id = pinpai[i].id;
          for(let j = 0; j < chexi.length; j++){
            if(chexi[j].parentId == id){
              pinpai[i].next.push(chexi[j]);
            }
          }
        }
        self.options2 = pinpai;
      }));
    },  
    methods: {
      //获取从map传来的数据
      getData(data){
        this.item3.data = data;
      },
      getId0(val){
        this.value0[0] = val[1];
      },
      getId1(val){
          this.value1[0] = val[1];
      },
      getId2(val){
          this.value1[1] = val[1];
      },
      getId3(val){
          this.value1[2] = val[1];
      },
      getId4(val){
          this.value1[3] = val[1];
      },
      open4() {
        this.$message({
          showClose: true,
          message: '请选择本品以及竞品',
          type: 'error',
          duration: '1500'
        });
      },
      search(){
        let self = this;
        this.action = true;//loading状态
        //去空
        for(let i = 0; i < this.value1.length; i++){
          if(this.value1[i] == undefined){
            this.value1.splice(i, 1);
            i = i - 1;//因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
          }
        }
        //校验输入
        if(this.value0.length == 0 || this.value1.length == 0){
          this.open4();
          this.action = false;
          return;
        }
        //生成本品加竞品的id
        let arr = [];
        arr = arr.concat(this.value0, this.value1);
        let Sname = [];//获取车系名字组合
        for(let i = 0; i < arr.length; i++){
          let id = arr[i];
          for(let q = 0; q < self.chexi.length; q++){
            if(self.chexi[q].id == id){
              Sname.push(self.chexi[q].name);
            }
          }
        }
        self.item2.name = Sname;
        this.item2.val = arr;
        console.log('id: ', arr);
        this.item3.name = Sname;
        //给后台传id-------价格优惠
        $.ajax({
            url: 'gz/getNodiscounts',
            data: {
            seriesId: arr
            },
            traditional: true,
            success: function(data){
                self.action = false;
                self.item2.data = data;
            },
            error: function(){
                self.action = false;
            }
        })
      }
    }
  };
</script>
